<template>
	<view class="safe-area-inset-bottom container">
		<view class="photos-container ub">
			<view style="width:15rpx"></view>
			<view class="ub-f1">
			    <view class="photo-container" v-for="(item, index) in photos" :key="index">
			        <image class="photo" mode="aspectFill" :src="item"></image>
			        <image @click="deletePhoto(index)" class="delete-button" src="../../static/moka/makecard/delete.png"></image>
			    </view>
			</view>
		</view>
		<view class="choose-number">{{photos.length}}/{{maxCount}}</view>
		<text class="choose-hint" v-if="maxCount - photos.length > 0">模版为{{maxCount}}张照片，还差{{maxCount-photos.length}}张，请继续添加</text>
		<u-button type="error" @click="choosePhoto">{{buttonTitle}}</u-button>
	</view>
</template>

<script>
	import temps from '../../config/07661147132B19AF610079408E24C660.js'
	export default {
		data() {
			return {
				photos: [],
				maxCount: 10,
				buttonTitle: '上传照片'
			}
		},
		onLoad(option) {
			this.photos = uni.getStorageSync('selectedPhotos')
			let tempCardId = uni.getStorageSync('cardid')
			let tempItem = temps.layouts[tempCardId]
			this.maxCount = tempItem.maxCount
		},
		watch: {
			'photos':{
				handler(newV, oldV) {
					let text = newV.length >= this.maxCount ? '开始制作' : 0 == newV.length ? '添加照片' : '继续添加';
					this.buttonTitle = text
				},
				deep: true
			}
		},
		methods: {
			choosePhoto() {
				let photoLength = this.photos.length
				if (photoLength >= this.maxCount) {
					uni.setStorageSync('selectedPhotos', this.photos)
					return uni.navigateTo({
						url: '/pages/personal/regsiter'
					})
				}
				uni.chooseImage({
					count: this.maxCount - photoLength,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: (res) => {
						this.photos = this.photos.concat(res.tempFilePaths)
					}
				})
			},
			deletePhoto(index) {
				this.photos.splice(index, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
	    background-color: #fff;
	}
	
	.container {
	    padding-top: 30rpx;
	}
	
	.photos-container {
	    flex-wrap: wrap;
	    width: 100%;
	    background-color: #fff;
	}
	
	.photo-container,.photos-container {
	    display: flex;
	    box-sizing: border-box;
	}
	
	.photo-container {
	    margin: 15rpx 15rpx 0rpx 0rpx;
	    width: 170rpx;
	    height: 170rpx;
	    position: relative;
	    flex-direction: column;
	    float: left;
	}
	
	.photo {
	    width: 140rpx;
	    height: 140rpx;
	    margin: 15rpx;
	}
	
	.photo image {
	    background-color: #2b2e3b;
	}
	
	.delete-button {
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 30rpx;
	    height: 30rpx;
	}
	
	.choose-number {
	    width: 100%;
	    height: 70rpx;
	    line-height: 70rpx;
	    color: #4a4a4a;
	    font-size: 30rpx;
	    text-align: right;
	    margin-right: 48rpx;
	}
	
	.choose-hint {
	    margin-top: 40rpx;
	    color: #585858;
	    width: 608rpx;
	    height: 66rpx;
	    line-height: 66rpx;
	    background: #fcf8de;
	    font-size: 28rpx;
	    border-radius: 1000rpx;
	    text-align: center;
	}
	
	.choose-button {
	    width: 638rpx;
	    text-align: center;
	    margin-top: 75rpx;
	    font-size: 32rpx;
	    height: 88rpx;
	    line-height: 88rpx;
	    color: #2a1500;
	    background: #ffdc00;
	    border-radius: 44rpx;
	}
</style>
